<template>
  <view class="gatheringRecord">
    <view class="gatheringTop">
      <view class="timeSelect">
        <view class="middleTo">
          <picker mode="date" :value="start_date"  @change="beginDateChange">
            <view class="date">{{sendData.dateBegin || '开始时间'}}</view>
          </picker>
          <image src="../../static/image/icon/downArrow-sm.png" class="arrow"></image>
        </view>
        <view class="text1">至</view>
        <view class="middleTo">
          <picker mode="date" :value="start_date" :start="sendData.dateBegin" @change="endDateChange">
            <view class="date">{{sendData.dateEnd || '结束时间'}}</view>
          </picker>
          <image src="../../static/image/icon/downArrow-sm.png" class="arrow"></image>
        </view>
      </view>
      <view class="cardDetail">
        <view class="cardDetail-t">
          <view class="t-l">
            <view class="text2">总营业额(元)</view>
            <view class="t-l-big">{{gatherFrom.totalMoney + '' || '0.00'}}</view>
          </view>
          <view class="t-r">
            <view class="text2 text2-top">收款笔数：{{gatherFrom.totalCount + '' || '0'}}</view>
          </view>
        </view>
        <view class="cardDetail-b">
          <view class="b-l">
            <view class="text2">现金(元)</view>
            <view class="price">{{gatherFrom.cashMoney + '' || '0.00'}}</view>
          </view>
          <view class="line"></view>
          <view class="b-r">
            <view class="text2">现金/红包余额(元)</view>
            <view class="price">{{gatherFrom.totalDiscountMoney + '' || '0.00'}}</view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="gatheringList">
      <view class="gatheringList-box" v-for="(item,index) in gatheringList" :key = "index">
        <view class="particularsList-item">
          <view class="particulars-item-l">
            <view class="l-img"><image style="width: 100%;height: 100%;border-radius: 50%;" :src="item.url"></image></view>
            <view class="l-txt">
              <view class="l-txt-t">{{item.nickName}}</view>
              <view class="l-txt-b">{{item.createTime}}</view>
            </view>
          </view>
          <view class="particulars-item-r">
            <view class="item-r-t">
              <text>+ {{item.money}}</text>
            </view>
            <!-- <view  class="item-r-b">
              <text class="statusTxt-txt defeated">总折扣: ￥{{item.totalDiscount}}</text>
            </view> -->
          </view>
        </view>
        
        <view class="new-text">
         支付明细:<block v-if="item.cashMoney != '0.00'"><text style="padding-left: 10rpx;">微信/支付宝 {{item.cashMoney}}</text></block>
         <block v-if="item.cashTicketDiscount != '0.00'"><text style="padding-left: 10rpx;">红包余额 {{item.cashTicketDiscount}}</text></block>
         <block v-if="item.balanceDiscount != '0.00'"><text style="padding-left: 10rpx;">现金余额 {{item.balanceDiscount}}</text></block>
        </view>
      </view>
      <view class="loading">
        <view class="loadingImg" v-if="gatheringList && gatheringList.length == 0">
          <image style="width: 340rpx; height: 340rpx;" :src="image" mode=""></image>
        </view>
        {{loadingText}}
      </view>
    </view>
  </view>
</template>

<script>
import { storeDetail,storeMoney } from "@/service/gatheringRecord/gatheringRecord.service.js"
export default {
  data () {
    const currentDate = this.getDate({
      format: true
    })
    return {
      gatheringList: [],
      gatherFrom: {
        totalMoney: '',
        cashMoney: '',
        totalDiscountMoney: '',
        totalCount: '',
      },
      start_date: currentDate,
      end_date: currentDate,
      sendData: {
        dateBegin:'',
        dateEnd:'',
        size:10,
        current:1
      },
      loadingText: '加载中...',
      image: this.$store.state.imgBaseUrl + '/notShop.png',
      loadingFlag: false,
    }
  },
  onLoad (option) {
    if (!option.beginDate) {
      this.getNowMonthDate();
    } else {
      this.sendData.dateBegin = option.beginDate;
      this.sendData.dateEnd = option.endDate;
      this.storeDetailList();
      this.getStoreDetail();
    }
  },
  onReachBottom () {
    let _self = this;
    // 页面滚动到底部的事件
    _self.getMoreDatas();
  },
  methods: {
    //获取本月
    getNowMonthDate() {
      let date = new Date();
      let year = date.getFullYear() + "";
      let month = (date.getMonth() + 1) + "";
      // // 本月第一天日期
      let begin = year + "-" + month + "-01";
      // // 本月最后一天日期    
      // let lastDateOfCurrentMonth = new Date(year,month,0);
      // let end = year + "-" + month + "-" + lastDateOfCurrentMonth.getDate();
      this.sendData.dateBegin = begin;
      this.sendData.dateEnd = this.start_date;
      this.storeDetailList();
      this.getStoreDetail();
    },
    // 选择开始日期
    beginDateChange (e) {
      this.sendData.current = 1;
      this.sendData.dateBegin = e.target.value;
      this.storeDetailList();
      this.getStoreDetail();
    },
    // 选择结束日期
    endDateChange (e) {
      this.sendData.current = 1;
      this.sendData.dateEnd = e.target.value;
      this.storeDetailList();
      this.getStoreDetail();
    },
    // 获取当前时间
    getDate (type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
    
      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    //获取到店付详情
    getStoreDetail () {
      //获取收款详情
      let params = {
        dateBegin: this.sendData.dateBegin,
        dateEnd: this.sendData.dateEnd
      }
      storeMoney(params,res => {
        if (res.status == 0) {
          this.gatherFrom = res.data;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    // 获取详细信息
    getMoreDatas () {
      if(!this.loadingFlag){
        return false;
      };
      this.sendData.current++;
      this.storeDetailList();
    },
    // 获取收款列表
    storeDetailList () {
      this.loadingText = '加载中...';
      uni.showNavigationBarLoading(); // 在当前页面显示导航条加载动画
      storeDetail(this.sendData,res => {
        if(res.status == 0) {
          if(res.data.records && res.data.records.length == 0 && this.gatheringList.length == 0) {
            this.loadingFlag = false;
            uni.hideNavigationBarLoading();
            this.loadingText = '暂无数据';
            return false;
          };
          if (this.sendData.current == 1) {
            this.gatheringList = res.data.records && res.data.records.length > 0 ? res.data.records : [];
          } else {
            this.gatheringList = this.gatheringList.concat(res.data.records);
          };
          uni.hideNavigationBarLoading();
          uni.stopPullDownRefresh();
          if (this.gatheringList.length == res.data.total) {
            this.loadingFlag = false;
            this.loadingText = '已加载全部'
          } else {
            this.loadingFlag = true;
            this.loadingText = '加载更多'
          }
        } else {
          this.loadingText = '暂无数据';
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.gatheringRecord {
    min-height: 100vh;
    background-color: #FFFFFF;
		.gatheringTop {
			padding: 40rpx 40rpx 20rpx;
			background-color: #FFFFFF;
      .timeSelect {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .middleTo {
          width: 260rpx;
          height: 56rpx;
          line-height: 56rpx;
          background: rgba(240,240,240,1);
          border-radius: 28rpx;
          font-size: 32rpx;
          font-family: PingFangSC-Regular,PingFang SC;
          color: rgba(51,51,51,1);
          display: flex;
          justify-content: center;
          align-items: center;
          .arrow {
            width: 20rpx;
            height: 12rpx;
            margin-left: 10rpx;
          }
          .date {
          	font-size: 28rpx;
          	font-weight: 400;
          	color: rgba(51,51,51,1);
          }
        }
        .text1 {
          font-size: 32rpx;
          font-family: PingFangSC-Regular,PingFang SC;
          font-weight: 400;
          color: rgba(51,51,51,1);
        }
      }
			.cardDetail {
        background: linear-gradient(315deg,rgba(116,115,116,1) 0%,rgba(45,45,45,1) 100%);
        box-shadow: 0px 2rpx 2rpx 0px rgba(0,0,0,0.15);
        border-radius: 16rpx;
				margin-top: 40rpx;
				padding: 40rpx 0 34rpx;
				.cardDetail-t {
					display: flex;
          justify-content: space-between;
          align-items: center;
          .t-l {
            margin-left: 74rpx;
          }
          .t-r {
            margin-right: 38rpx;
          }
					.t-l-big {
            font-size: 48rpx;
            font-family: PingFangSC-Medium,PingFang SC;
            font-weight: 500;
            color: rgba(255,255,255,1);
					}
					
				}
        .text2 {
          font-size: 24rpx;
          font-family: PingFangSC-Regular,PingFang SC;
          font-weight: 400;
          color: rgba(255,255,255,1);
          margin-bottom: 10rpx;
          &.text2-top {
            margin-top: 40rpx;
          }
        }
				.cardDetail-b {
					display: flex;
					justify-content: space-between;
          align-items: center;
          margin-top: 62rpx;
          .b-l {
            margin-left: 74rpx;
          }
          .b-r {
            margin-right: 62rpx;
          }
          .line {
            width: 4rpx;
            height: 26rpx;
            background-color: #CCCCCC;
          }
          .price {
            font-size: 36rpx;
            font-family: PingFangSC-Medium,PingFang SC;
            font-weight: 500;
            color: rgba(255,255,255,1);
          }
				}
			}
		}
		.gatheringList {
			background-color: #FFFFFF;
			min-height: calc(100vh - 250px);
			margin-top: 20rpx;
      padding: 0 30rpx;
      .gatheringList-box {
        border-bottom: 1px solid #F5F5F5;
        padding: 36rpx 0 32rpx;
      }
      .new-text {
        font-size: 24rpx;
        font-family: PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: rgba(153,153,153,1);
        margin-top: 40rpx;
      }
		  .particularsList-item {
		    display: flex;
		    justify-content: space-between;
		    .particulars-item-l {
		      .l-img {
            width: 60rpx;
            height: 60rpx;
		        vertical-align: middle;
		        display: inline-block;
		      }
		      .l-txt {
		        vertical-align: middle;
		        display: inline-block;
		        margin-left: 14rpx;
		        .l-txt-t {
		          font-size: 28rpx;
		          color: rgba(51,51,51,1);
              font-family:PingFangSC-Regular,PingFang SC;
		        }
		        .l-txt-b {
		          font-size:22rpx;
		          color:rgba(153,153,153,1);
              margin-top: 12rpx;
		        }
		      }
		    }
        .particulars-item-r {
          text-align: end;
          margin-top: 20rpx;
          line-height: 40rpx;
          .item-r-t {
            font-size:32rpx;
            font-family:PingFangSC-Medium,PingFang SC;
            font-weight:500;
            color:rgba(194,172,120,1);
          }
          .item-r-b {
            font-size:22rpx;
            font-weight:500;
            color:rgba(153,153,153,1);
          }
        }
		  }
			.loading {
				text-align: center;
				font-size: 26rpx;
				color: #999999;
        margin-top: 50rpx;
			}
		}
	}
</style>
